import React, { useState, useEffect } from 'react';
import { Modal } from 'antd';
import BraftEditor from 'braft-editor';
// import moment from 'moment';
import { useReactToPrint } from 'react-to-print';
import { getDict } from '@/utils/dataDictUtil';
import pageFooter from './images/pageFooter.png';
import pageHeader from './images/pageHeader.png';
import styles from './index.less';

// 打印的模板组件
const ComponentToPrint = React.forwardRef(({ data }, ref) => (
    <div
        ref={ref}
        style={{
            position: 'relative',
            width: '92%',
            margin: '0 auto',
            height: '100vh'
        }}
        className={styles.print}
    >
        <table className={styles.tableCtr}>
            <thead
                style={{
                    border: '0'
                }}
            >
                <img
                    src={pageHeader}
                    style={{ width: '22%', display: 'block', border: '0', paddingTop: '30px' }}
                    alt=""
                />
            </thead>
            <tbody>
                <BraftEditor
                    style={{
                        border: '0',
                        width: '100%',
                        padding: '20px'
                    }}
                    readOnly
                    controls={[]}
                    contentStyle={{ height: 'auto', minHeight: 500 }}
                    value={BraftEditor.createEditorState(data)}
                />
            </tbody>
        </table>
        <div
            style={{
                position: 'absolute',
                bottom: '30px'
            }}
        >
            <img src={pageFooter} style={{ width: '100%', display: 'block' }} alt="" />
        </div>
    </div>
));

export const PrintModal = props => {
    const { visible, detailData, handleCancel, templateContent } = props;
    const { dimissionDate, employeeName, idNumber, dutyName, entryDate, companyName } = detailData;
    const matchObj = {
        dimissionDate,
        employeeName,
        idNumber,
        dutyName,
        entryDate,
        companyName
    };

    // 初始化离职模板
    // const contentText = `<p></p><p></p><p style="text-align:center;"><span style="color:#000000"><span style="font-size:24px"><strong>离</strong></span> <span style="font-size:24px"><strong>职</strong></span> <span style="font-size:24px"><strong>证</strong></span> <span style="font-size:24px"><strong>明</strong></span></span></p><p></p><p style="text-indent:2em;" class="MsoNormal"><span style="color:#000000"><span style="font-size:14px">兹有员工：<u>    ${employeeName}    </u></span> <span style="font-size:14px">，身份证号码：<u>    ${idNumber}     </u></span> <span style="font-size:14px">，于</span><u>  </u><span style="font-size:14px"><u> ${moment(
    //     entryDate
    // ).format('YYYY')}  </u> 年</span> <u> </u><span style="font-size:14px"><u> ${moment(entryDate).format(
    //     'MM'
    // )}  </u> 月<u> ${moment(entryDate).format(
    //     'DD'
    // )} </u>日进入${companyName}公司工作，担任 <u>  ${dutyName}   </u></span> <span style="font-size:14px">一职。因个人原因于</span><u> </u><span style="font-size:14px"><u> ${moment(
    //     dimissionDate
    // ).format('YYYY')} </u>年 </span><u> </u><span style="font-size:14px"><u> ${moment(dimissionDate).format(
    //     'MM'
    // )}  </u>月<u> ${moment(dimissionDate).format(
    //     'DD'
    // )} </u>日正式离职，已经与公司办理好工作交接，无劳动争议纠纷。</span></span></p><p style="text-indent:2em;"><span style="font-size:14px"><span style="color:#000000">本证明仅证明该员工已经离职！</span></span></p><p></p><p></p><p><span style="font-size:14px"><span style="color:#000000">离职人员签字： </span></span></p><p><span style="font-size:14px"><span style="color:#000000">${moment(
    //     dimissionDate
    // ).format('YYYY')} 年 ${moment(dimissionDate).format('MM')} 月 ${moment(dimissionDate).format(
    //     'DD'
    // )} 日</span></span></p><p></p><p></p><p></p><p></p><p style="text-align:right;"><span style="font-size:14px"><span style="color:#000000">微微科技有限公司</span></span></p><p style="text-align:right;"><span style="font-size:14px"><span style="color:#000000"> ${moment(
    //     dimissionDate
    // ).format('YYYY')} 年 ${moment(dimissionDate).format('MM')} 月 ${moment(dimissionDate).format(
    //     'DD'
    // )} 日</span></span></p>`;

    const [editContent, setEditContent] = useState();
    const componentRef = React.createRef();
    const handlePrint = useReactToPrint({
        content: () => componentRef.current
    });

    // 获取邮件插入参数数据字典
    useEffect(() => {
        getDict('paramOfDimissionProveMail').then(ret => {
            const dict = ret && ret.map(e => ({ field: e.dictValue, value: e.dictName }));
            let str = templateContent;
            for (let i = 0, len = dict.length; i < len; i += 1) {
                str = str.replaceAll(dict[i].field, matchObj[dict[i].field]);
            }
            str = str.replace(/\${/g, '').replace(/}/g, '');
            setEditContent(str);
        });
    }, []);
    // 打印
    const handleOk = () => {
        handlePrint();
    };
    // 富文本变化值
    const handleEditorChange = editorStates => {
        setEditContent(editorStates.toHTML());
    };
    // 富文本编辑器渲染
    const renderEdit = React.useMemo(
        () => (
            <BraftEditor
                onChange={handleEditorChange}
                // readOnly
                controls={[
                    'undo',
                    'redo',
                    'font-size',
                    'separator',
                    'text-color',
                    'bold',
                    'italic',
                    'text-indent',
                    'text-align',
                    'underline'
                ]}
                placeholder="请输入内容"
                // value={BraftEditor.createEditorState(editContent)}
                defaultValue={BraftEditor.createEditorState(editContent)}
            />
        ),
        [editContent]
    );
    return (
        <div>
            <Modal
                title="打印离职证明"
                visible={visible}
                onOk={handleOk}
                onCancel={() => {
                    if (handleCancel) {
                        handleCancel();
                    }
                }}
                okText="打印"
                width="700px"
            >
                <div className={styles.print}>
                    {editContent && renderEdit}
                    <div style={{ display: 'none' }}>
                        <ComponentToPrint ref={componentRef} data={editContent} />{' '}
                    </div>
                </div>
            </Modal>
        </div>
    );
};
